(function ($) {
    'use strict';

    function SliderShow($elem, options) {
        this.$elem = $elem;//轮播图
        this.options = options;

        this.$items = this.$elem.find('.slider-item');//图片
        this.$indicators = this.$elem.find('.slider-indicator');//下标
        this.$controls = this.$elem.find('.slider-control');//箭头

        this.itemNum = this.$items.length;
        this.curIndex = this._getCorrectIndex(this.options.activeIndex);
        this._init();
    }

    SliderShow.DEFAULTS = {css3: false, js: false, animation: 'fade', activeIndex: 0, interval: 0};
    SliderShow.prototype._init = function () {
        let self = this;
        //加载图片
        this.$elem.trigger('slider-show', [this.curIndex, this.$items[this.curIndex]]);

        // init 下标
        this.$indicators.removeClass('slider-indicator-active');
        this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');

        // init to
        if (this.options.animation === 'slide') {//滑入滑出方式
            this.$elem.addClass('slider-slide');
            this.$items.eq(this.curIndex).css('left', 0);//当前要显示的图片left=0
            // send message
            this.$items.on('move moved', function (e) {
                let index = self.$items.index(this);
                if (e.type === 'move') {
                    if (index === self.curIndex) {
                        //如果要移动的是当前显示的图片;说明当前图片要隐藏
                        self.$elem.trigger('slider-hide', [index, this]);
                    } else {
                        //如果要移动的图片不是当前显示，说明要移动的图片要显示
                        self.$elem.trigger('slider-show', [index, this]);
                    }
                } else { // moved
                    if (index === self.curIndex) { // 指定的
                        self.$elem.trigger('slider-shown', [index, this]);
                    } else {
                        self.$elem.trigger('slider-hidden', [index, this]);
                    }
                }
            });
            // move init
            this.$items.move(this.options);
            this.to = this._slide;

            this.itemWidth = this.$items.eq(0).width();
            this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';
        } else { // fade 淡入淡出方法
            this.$elem.addClass('slider-fade');
            this.$items.eq(this.curIndex).show();

            // 绑定图片的show事件-->触发父元素的 slider-show事件 -->加载图片
            this.$items.on('show', function (e) {
                self.$elem.trigger('slider-' + e.type, [self.$items.index(this), this]);
            });
            // showHide init
            this.$items.showHide(this.options);
            this.to = this._fade;
        }
        // bind event
        this.$elem
            .hover(function () {
                self.$controls.show();
            }, function () {
                self.$controls.hide();
            })
            .on('click', '.slider-control-left', function () {
                self.to(self._getCorrectIndex(self.curIndex - 1), 1);
            })
            .on('click', '.slider-control-right', function () {
                self.to(self._getCorrectIndex(self.curIndex + 1), -1);
            })
            .on('click', '.slider-indicator', function () {
                self.to(self._getCorrectIndex(self.$indicators.index(this)));
            });

        // auto
        if (this.options.interval && !isNaN(Number(this.options.interval))) {
            this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
            this.auto();
        }

    };
    SliderShow.prototype._getCorrectIndex = function (index) {
        if (isNaN(Number(index))) return 0;
        if (index < 0) return this.itemNum - 1;
        if (index > this.itemNum - 1) return 0;
        return index;
    };
    SliderShow.prototype._activateIndicators = function (index) {
        this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
        this.$indicators.eq(index).addClass('slider-indicator-active');
    };
    SliderShow.prototype._fade = function (index) {
        if (this.curIndex === index) return;
        this.$items.eq(this.curIndex).showHide('hide');//隐藏当前图片
        this.$elem.trigger('slider-show', [index, this.$items[index]]);//加载目标图片,目标图片可能还没加载
        this.$items.eq(index).showHide('show');//显示目标图片
        this._activateIndicators(index);//更新激活的下标
        this.curIndex = index;//更新当前激活的index
    };
    SliderShow.prototype._slide = function (index, direction) {
        if (this.curIndex === index) return;
        let self = this;
        // 确定滑入滑出的方向
        if (!direction) { // click indicators
            if (this.curIndex < index) {
                direction = -1;
            } else if (this.curIndex > index) {
                direction = 1;
            }
        }
        // 设置指定滑入幻灯片的初始位置
        this.$items.eq(index).removeClass(this.transitionClass).css('left', -1 * direction * this.itemWidth);

        // 当前幻灯片滑出可视区域，指定幻灯片滑入可视区域
        setTimeout(function () {
            self.$items.eq(self.curIndex).move('x', direction * self.itemWidth);
            self.$items.eq(index).addClass(self.transitionClass).move('x', 0);
            self.curIndex = index;
        }, 20);

        // 激活indicator
        this._activateIndicators(index);
    };
    SliderShow.prototype.auto = function () {
        let self = this;
        this.intervalId = setInterval(function () {
            self.to(self._getCorrectIndex(self.curIndex + 1), -1);
        }, this.options.interval);
    };
    SliderShow.prototype.pause = function () {
        clearInterval(this.intervalId);
    };
    /**
     * 1) 初始化的时候触发 slider-show( curIndex,curImage ) curIndex:轮播图当前索引,curImage轮播图当前图片
     */
    $.fn.extend({
        slideshow: function (option) {
            return this.each(function () {
                let $this = $(this),
                    slideshow = $this.data('slideshow'),
                    options = $.extend({}, SliderShow.DEFAULTS, $this.data(), typeof option === 'object' && option);
                if (!slideshow) $this.data('slideshow', slideshow = new SliderShow($this, options));
                if (typeof slideshow[option] === 'function') slideshow[option]();
            });
        }
    })
})(jQuery);